<template>
	<view class="login-page">
		<!-- 背景图 -->
		<image class="background-image" :style="isFocus ? 'filter: brightness(0.2);' : ''" :src="backgroundImage"
			mode="aspectFill" @error="onBackgroundImageError">
		</image>

		<!-- 头部标题 -->
		<view class="login-header">
			<view class="title">{{ loginMethodItem.title }}</view>
			<view class="subtitle">{{ loginMethodItem.sub_title }}</view>
		</view>

		<!-- 登录内容区域 -->
		<view class="login-content">
			<!-- 手机号一键登录 -->
			<view v-if="loginMethodItem.status === 0" class="login-content-key">
				<!-- APP端 -->
				<!-- #ifdef APP-PLUS -->
				<view class="key-login">
					<text class="key-num">{{ phoneKey || '暂未授权' }}</text>
				</view>
				<view class="key-tip">安全保障，畅快登录</view>
				<u-button class="login-button" :text="phoneKey ? '本机号码一键登录' : '手机号授权'" :loading="isLoading"
					:disabled="isLoading" color="linear-gradient(to bottom, #10C5F0, #2CADEF)" @click="handleKeyLogin">
				</u-button>
				<!-- #endif -->

				<!-- 微信小程序端 -->
				<!-- #ifdef MP-WEIXIN -->
				<u-button class="login-button wechat-login-btn" icon="/static/login/icon_wx.png" icon-color="#fff"
					color="linear-gradient(to bottom, #10C5F0, #2CADEF)" open-type="getPhoneNumber"
					@getphonenumber="wxGetPhoneNumber" :loading="isLoading" :disabled="isLoading">
					微信用户一键登录
				</u-button>
				<!-- #endif -->

				<!-- 切换登录方式 -->
				<!-- #ifndef H5 -->
				<view class="other-login">
					<text @click="changeLoginMethod(2)">账号密码登录</text>
				</view>
				<!-- #endif -->
			</view>

			<!-- 手机号验证码登录 -->
			<view class="login-content-phone" v-if="loginMethodItem.status === 1">
				<view v-if="!isSendCode">
					<u-input style="margin-bottom: 50rpx;" @focus="isFocus = true" @blur="isFocus = false"
						v-model="phoneCode" placeholder="请输入手机号" color="#FFFFFF">
						<u-text text="+86" slot="prefix" margin="0 3px 0 0" color="#FFFFFF" suffixIcon="arrow-down"
							iconStyle="color: #FFFFFF">
						</u-text>
					</u-input>
					<u-button class="login-button" text="获取验证码" :loading="isLoading" :disabled="isLoading"
						color="linear-gradient(to bottom, #10C5F0, #2CADEF)" @click="handlePhoneCodeLogin">
					</u-button>

					<view class="other-login">
						<text @click="changeLoginMethod(0)">本机号码一键登录</text>
						<text @click="changeLoginMethod(2)">账号密码登录</text>
					</view>
				</view>

				<view class="code-box" v-else>
					<view class="tip-text">
						验证码已发送至&nbsp;&nbsp;<text class="tip-phone">{{ phoneCode }}</text>
					</view>
					<u-code-input v-model="code" :maxlength="6" color="#FFFFFF" borderColor="#EAEAEA"
						@finish="handleVerificationCode">
					</u-code-input>
					<view class="tip-text" @click="resendCode">
						重新发送
					</view>
				</view>
			</view>

			<!-- 账号密码登录 -->
			<view class="login-content-pwd" v-if="loginMethodItem.status === 2">
				<uni-easyinput type="input" v-model="phonePwd" placeholder="请输入境内手机号/用户名/邮箱等" :inputBorder="false"
					primaryColor="#FFFFFF" :styles="{backgroundColor: 'none', color:'#FFFFFF'}"
					placeholderStyle="color:#D6D6D7" @focus="isFocus = true" @blur="isFocus = false">
					<template #left>
						<uni-icons type="person" color="#D6D6D7" size="30"></uni-icons>
					</template>
				</uni-easyinput>

				<uni-easyinput type="password" v-model="password" placeholder="请输入登录密码" :inputBorder="false"
					primaryColor="#FFFFFF" :styles="{backgroundColor: 'none', color:'#FFFFFF'}"
					placeholderStyle="color:#D6D6D7" @focus="isFocus = true" @blur="isFocus = false">
					<template #left>
						<uni-icons type="locked" color="#D6D6D7" size="30"></uni-icons>
					</template>
					<template #right>
						<view @click="onForgot">忘记密码?</view>
					</template>
				</uni-easyinput>

				<u-button class="login-button" text="登录" :loading="isLoading" :disabled="isLoading"
					color="linear-gradient(to bottom, #FC8848, #FC8848)" @click="handleAccountLogin">
				</u-button>

				<view class="other-login">
					<text @click="changeLoginMethod(0)">本机号码一键登录</text>
				</view>
			</view>
		</view>

		<!-- 页面底部 -->
		<view class="login-bottom" v-if="!isSendCode">
			<!-- 非微信小程序环境显示第三方登录 -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="third-party-login">
				<u-divider textColor="#FFFFFF" lineColor="#FFFFFF" text="第三方登录"></u-divider>
				<view class="icons">
					<u-icon class="icons-icon" name="weixin-fill" color="#24DB5A" size="26"></u-icon>
					<!-- <u-icon class="icons-icon" name="taobao" color="#FC8848" size="26"></u-icon> -->
					<!-- <u-icon class="icons-icon" name="qq-fill" color="#7BD4EF" size="26"></u-icon> -->
					<!-- <u-icon class="icons-icon" name="apple-fill" color="#272636" size="26"></u-icon> -->
					<u-icon class="icons-icon" name="zhifubao" color="#1296DB" size="26"></u-icon>
				</view>
			</view>
			<!-- #endif -->

			<!-- 协议勾选 -->
			<view class="agreement">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="agree" size="mini" :checked="isAgree" color="#FC8848"
							style="transform:scale(0.6)" />
						<text>我已阅读并同意平台有关
							<text class="protocol" @click.stop="handleToServerPolicy">《本地熊服务协议》</text>与
							<text class="protocol" @click.stop="handleToPrivacyPolicy">《隐私政策》</text>以及
							<text class="protocol" @click.stop="onProtocol">《中国**认证服务协议》</text>，
							未注册手机号将自动注册
						</text>
					</label>
				</checkbox-group>
			</view>
		</view>

		<!-- 协议弹窗 -->
		<u-popup :show="showPopup" :round="10" mode="center" @close="showPopup = false">
			<view class="protocol-box" @touchmove.stop.prevent>
				<view class="protocol-box-title">温馨提示</view>
				<scroll-view class="protocol-content" scroll-y @touchstart="handleScrollTouchStart"
					@touchmove="handleScrollTouchMove" @touchend="handleScrollTouchEnd">
					欢迎来到本地熊，解锁身边的美好旅程！
					亲爱的用户，我们将通过<text class="protocol" @click.stop="handleToServerPolicy">《本地熊服务协议》</text>以及<text class="protocol"
						@click.stop="handleToPrivacyPolicy">《隐私政策》</text>，给您提供更精准、贴心的本地文旅服务。您的个人信息安全是我们的首要责任，所有权限仅用于优化服务体验，我们将严格遵守相关法律法规要求，采用各种安全措施保护您的信息安全。在点击同意之前，请仔细阅读所有条款，其中包括：
					1、为了更好的使用体验，我们可能会申请获取以下权限：
					—为提供发布服务，我们需要使用您的手机存储权限、媒体影音权限、麦克风权限。
					—为了用于推荐您更感兴趣的内容，我们可能需要申请位置权限。
					—为了保障软件的安全运行和账户安全，我们将会申请收集您的设备信息、IP地址、WLAN MAC地址。
					—为了帮助您发现更多好友，我们可能需要申请通讯录权限。
					2、您可以访问、修改、删除您的个人信息并管理您的授权，我们也会为您提供注销渠道。
					3、明确告知您本地熊的联系通道及方式。
					您点击同意，即表示您已阅读并同意上述协议条款，本地熊将采用加密技术保护您的信息安全，并为您提供优质的产品服务。感谢您的信任，本地熊愿陪您探索城市角落的惊喜与美好～
				</scroll-view>
				<view class="footer-detail">
					若您想了解完整版条款内容，可以点击<text class="protocol" @click.stop="handleToServerPolicy">《本地熊服务协议》</text>以及<text class="protocol"
						@click.stop="handleToPrivacyPolicy">《隐私政策》</text>进行查看。
				</view>
				<view class="button-group">
					<view class="button button-cancel" @click="handleCancelBtn">不同意</view>
					<view class="button button-confirm" @click="onPopupLogin">同意</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showCancelPopup" :round="10" mode="center" @close="showPopup = false">
			<view class="protocol-box" @touchmove.stop.prevent>
				<view class="protocol-box-title">温馨提示</view>
				<view class="protocol-content">
					很遗憾！如果您不同意<text class="protocol" @click.stop="handleToServerPolicy">《本地熊服务协议》</text>以及<text class="protocol"
						@click.stop="handleToPrivacyPolicy">《隐私政策》</text>的话，本地熊将无法为您提供
					服务。您需要点击同意协议之后，才能使用本地熊。我们将严格遵守相关法律法规要求，采用各种安全措施保护您的信息安全。
				</view>
				<view class="button-group">
					<view class="button button-cancel" @click="handleCancel">放弃使用</view>
					<view class="button button-confirm" @click="onPopupLogin">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		phoneLogin,
		getUser,
		apiLogin,
		postIMUserRegister,
		getIMAPPToken,
		getIMUserToken,
		getQiNiuUrl
	} from '@/request/api.js'
	import {
		mapActions,
		mapState,
		mapGetters
	} from 'vuex'
	import imService from '@/utils/imService.js'
	import notificationService from '@/utils/notificationService.js'
	export default {
		name: 'LoginPage',
		data() {
			return {
				isLoading: false,
				isFocus: false,
				showPopup: false,
				backgroundImage: 'http://www.hacn86.cn/home_page/2025/06/30/1751276711402_20250630174511A001.gif',
				fallbackBackgroundImage: '/static/common/login-bg.gif', // 本地备用背景图
				phoneKey: "",
				phoneCode: '',
				code: "",
				phonePwd: '',
				password: null,
				isAgree: false,
				isSendCode: false,
				loginMethod: [{
						status: 0,
						title: "登录开启专属精彩之旅",
						sub_title: "解锁属于你的旅程，邂逅旅途中的小确幸"
					},
					{
						status: 1,
						title: "手机验证码登录",
						sub_title: "使用未注册号码默认自动完成注册"
					},
					{
						status: 2,
						title: "账号密码登录",
						sub_title: "链接每一次旅行的精彩"
					}
				],
				loginMethodItem: {},
				showPrivacyPopup: false,
				// 滚动控制相关变量
				startY: 0,
				scrollY: 0,
				isScrolling: false,
				showCancelPopup: false
			}
		},
		computed: {
			...mapGetters('im', ['isImLoggedIn']),
			...mapState('im', ['isLoggingIn', 'loginError', 'isConnected'])
		},
		onLoad() {
			this.initLoginMethod()
			// #ifdef APP-PLUS
			this.initPhoneNumber()
			// #endif
		},
		methods: {
			...mapActions('im', {
				imLoginAction: 'login'
			}),
			// 第一个弹框点击不同意打开第二个弹框
			handleCancelBtn() {
				this.showPopup = false
				this.showCancelPopup = true
			},
			// 放弃使用
			handleCancel() {
				// 不同意时可以选择退出App
				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif
			},
			// 跳转到webview打开隐私策略
			handleToPrivacyPolicy() {
				const externalUrl = 'http://123.57.103.80/index.html';
				uni.navigateTo({
					url: '/pages_sub/webView/webView?url=' + encodeURIComponent(externalUrl)
				})
			},
			// 服务协议
			handleToServerPolicy(){
				const externalUrl = 'http://123.57.103.80/user.html';
				uni.navigateTo({
					url: '/pages_sub/webView/webView?url=' + encodeURIComponent(externalUrl)
				})
			},
			// 初始化登录方式
			initLoginMethod() {
				// #ifdef H5
				this.loginMethodItem = this.loginMethod[2] // H5默认账号密码登录
				// #endif

				// #ifndef H5
				this.loginMethodItem = this.loginMethod[0] // 其他平台默认一键登录
				// #endif
			},
			onAgreePrivacy() {
				this.showPrivacyPopup = false
				// 可以在这里执行同意的后续操作
			},
			onDisagreePrivacy() {
				console.log('用户不同意隐私协议');
				// 可以在这里执行不同意的后续操作
			},

			// 初始化手机号（APP端）
			initPhoneNumber() {
				const phoneNumber = this.$store.state.phoneNumber
				if (phoneNumber) {
					this.phoneKey = phoneNumber
				} else {
					this.startUniverify()
				}
			},

			// 背景图片加载失败处理
			onBackgroundImageError() {
				console.warn('背景图片加载失败，使用备用图片')
				this.backgroundImage = this.fallbackBackgroundImage
			},

			// 处理一键登录
			async handleKeyLogin() {
				if (!this.checkAgreement()) return

				if (this.phoneKey) {
					await this.handleLogin(phoneLogin, {
						phoneNumber: this.phoneKey
					})
				} else {
					this.startUniverify()
				}
			},

			// 处理验证码登录
			handlePhoneCodeLogin() {
				if (!this.isPhoneNumber(this.phoneCode)) return
				if (!this.checkAgreement()) return

				this.isSendCode = true
				// 这里应该调用发送验证码的接口
				// await sendVerificationCode(this.phoneCode)
			},

			// 处理账号密码登录
			async handleAccountLogin() {
				if (!this.isPhoneNumber(this.phonePwd)) return
				if (!this.isValidPassword(this.password)) return
				if (!this.checkAgreement()) return

				await this.handleLogin(apiLogin, {
					username: this.phonePwd,
					password: this.password,
					deviceId: this.phonePwd,
					clientType: 'MINI'
				})
			},

			// 处理验证码输入完成
			async handleVerificationCode(code) {
				if (!this.checkAgreement()) return

				// 这里应该调用验证码验证接口
				// await verifyCode(this.phoneCode, code)
				// 验证成功后执行登录逻辑
			},

			// 重新发送验证码
			resendCode() {
				if (!this.isPhoneNumber(this.phoneCode)) return
				// 调用重新发送验证码接口
				// this.handlePhoneCodeLogin()
			},

			// 统一登录处理函数
			async handleLogin(loginApi, params) {
				if (this.isLoading) return // 防止重复点击

				this.isLoading = true
				try {
					// 设置客户端类型
					// #ifdef MP-WEIXIN
					// params.clientType = "MINI"
					// params.deviceId = params.phoneNumber
					// #endif

					// #ifndef MP-WEIXIN
					params.clientType = "APP"
					params.deviceId = params.phoneNumber
					// #endif

					const loginRes = await loginApi(params)


					// 检查返回数据是否存在
					if (!loginRes.data) {
						throw new Error('登录接口返回数据异常')
					}

					// 处理业务逻辑错误
					if (loginRes.data.code !== 200) {
						throw new Error(loginRes.data.msg || '登录失败，请稍后再试')
						return
					}

					// 存储token并更新登录状态
					uni.setStorageSync('token', loginRes.data.token)
					this.$store.commit('login')

					// 获取IM App Token
					const appTokenRes = await getIMAPPToken()
					if (appTokenRes.data && appTokenRes.data.data) {
						this.$store.commit('im/SET_IM_APP_TOKEN', appTokenRes.data.data)
					} else {
						throw new Error('获取IM应用凭证失败')
					}

					// 获取并存储用户信息
					await this.fetchAndStoreUserInfo()

					// 连接通知服务
					const businessToken = loginRes.data.token
					const userId = this.$store.state.userInfo.userId
					if (userId && businessToken) {
						console.log(`[Login Success] 准备连接通知服务，用户ID: ${userId}`)
						notificationService.connect(userId, businessToken)
							.then(msg => console.log(msg, '连接通知服务成功的消息'))
							.catch(err => console.error("从登录页连接通知服务失败:", err))
					}

					// 导航到相应页面
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})

					if (loginRes.data.firstLogin) {
						uni.reLaunch({
							url: '/pages_sub/login/select-sex/select-sex'
						})
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				} catch (error) {
					console.log(error);
					uni.showToast({
						title: error.data.msg,
						icon: 'none',
						duration: 2000
					})
				} finally {
					this.isLoading = false
				}
			},

			// 获取并存储用户信息
			async fetchAndStoreUserInfo() {
				try {
					// 获取用户信息
					const userRes = await getUser()
					const userInfo = userRes.data.data
					this.$store.commit('setUserInfo', userInfo)

					// 获取IM登录凭证
					const imTokenRes = await getIMUserToken({
						grant_type: 'inherit',
						username: userInfo.userId,
						autoCreateUser: true,
						nickname: userInfo.nickName || '',
						avatarurl: userInfo.avatar,
						ttl: 0
					})
					const imToken = imTokenRes.data.access_token

					// 存储IM凭证
					uni.setStorageSync('im_user_id', userInfo.userId)
					uni.setStorageSync('im_token', imToken)
					this.imLoginAction({
						username: userInfo.userId + '',
						token: imToken
					});
				} catch (error) {
					console.error("获取用户或IM凭证失败:", error)
					uni.showToast({
						title: "获取附加信息失败，部分功能可能受限",
						icon: "none"
					})
				}
			},

			// 微信获取手机号回调
			wxGetPhoneNumber(e) {
				console.log('微信手机号授权回调:', e.detail)

				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					if (e.detail.errMsg.includes('fail user deny')) {
						uni.showToast({
							title: '您已拒绝授权',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '无法获取手机号，请稍后再试',
							icon: 'none'
						})
					}
					return
				}

				const wechatCode = e.detail.code
				const loginParams = {
					platform: 'wx_miniapp',
					code: wechatCode
				}

				this.handleLogin(phoneLogin, loginParams)
			},

			// 启动一键登录
			startUniverify() {
				uni.login({
					provider: 'univerify',
					univerifyStyle: {
						otherLoginButton: {
							visible: false
						},
						privacyTerms: {
							visible: false
						},
						authButton: {
							title: "手机号授权认证",
							normalColor: "#FFD100",
							highlightColor: "#EAB200"
						},
						icon: {
							path: "@/unpackage/res/icons/60x60.png",
							width: "60px",
							height: "60px"
						}
					},
					success: (res) => {
						if (res.authResult) {
							const {
								openid,
								access_token
							} = res.authResult
							this.cloudGetPhone(openid, access_token)
						}
					},
					fail: (err) => {
						console.error('授权失败:', err)
						uni.showToast({
							title: '授权失败，请重试',
							icon: 'none'
						})
					}
				})
			},

			// 获取手机号
			async cloudGetPhone(openid, access_token) {
				try {
					const {
						result
					} = await uniCloud.callFunction({
						name: 'getPhoneNumber',
						data: {
							openid,
							access_token
						}
					})

					if (result.code === 200) {
						this.phoneKey = result.phone
						uni.showToast({
							title: '手机号已获取'
						})
						this.$store.commit('setPhoneNumber', result.phone)
						setTimeout(() => {
							uni.closeAuthView()
						}, 500)
					} else {
						uni.showModal({
							content: '获取失败，请重试'
						})
					}
				} catch (error) {
					console.error('获取手机号失败:', error)
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					})
				}
			},

			// 验证手机号
			isPhoneNumber(phoneNumber) {
				if (!phoneNumber || phoneNumber === "") {
					uni.showToast({
						title: '手机号不可为空',
						icon: 'none'
					})
					return false
				}

				const regExp = /^1[3456789]\d{9}$/
				if (regExp.test(phoneNumber)) {
					return true
				} else {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return false
				}
			},

			// 验证密码
			isValidPassword(password) {
				if (!password || password === "") {
					uni.showToast({
						title: '密码不可为空',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 检查协议同意状态
			checkAgreement() {
				if (this.isAgree) {
					return true
				} else {
					this.showPopup = true
					return false
				}
			},

			// 弹窗登录
			onPopupLogin() {
				this.isAgree = true
				this.showPopup = false
				this.showCancelPopup = false
				// 触发当前登录方式的处理函数
				switch (this.loginMethodItem.status) {
					case 0:
						this.handleKeyLogin()
						break
					case 1:
						this.handlePhoneCodeLogin()
						break
					case 2:
						this.handleAccountLogin()
						break
				}
			},

			// 忘记密码
			onForgot() {
				uni.navigateTo({
					url: '/pages_sub/login/find-password'
				})
			},

			// 切换登录方式
			changeLoginMethod(index) {
				this.loginMethodItem = this.loginMethod[index]
			},

			// 协议勾选变化
			checkboxChange(e) {
				this.isAgree = e.detail.value.includes('agree')
			},

			// 查看协议
			onProtocol() {

			},

			// 滚动处理相关方法
			handleScrollTouchStart(e) {
				this.startY = e.touches[0].clientY;
				const scrollContent = e.currentTarget;
				this.scrollY = scrollContent.scrollTop;
				this.isScrolling = true;
			},

			handleScrollTouchMove(e) {
				if (!this.isScrolling) return;

				const currentY = e.touches[0].clientY;
				const moveY = currentY - this.startY;
				const scrollContent = e.currentTarget;
				const scrollTop = scrollContent.scrollTop;
				const scrollHeight = scrollContent.scrollHeight;
				const clientHeight = scrollContent.clientHeight;

				// 判断是否滚动到顶部或底部
				const isAtTop = scrollTop === 0 && moveY > 0;
				const isAtBottom = scrollTop + clientHeight >= scrollHeight && moveY < 0;

				// 如果在顶部向下滚动或在底部向上滚动，则阻止默认行为
				if (isAtTop || isAtBottom) {
					e.preventDefault();
				}
			},

			handleScrollTouchEnd() {
				this.isScrolling = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background-image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
		filter: brightness(0.7);
	}

	.protocol-box {
		width: 540rpx;
		max-height: 1000rpx;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;

		.footer-detail {
			font-size: 24rpx;
			margin: 10rpx 0;
		}

		&-title {
			font-size: 35rpx;
			font-weight: bold;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			text-align: center;
			flex-shrink: 0;
		}

		.protocol-content {
			flex: 1;
			max-height: 500rpx;
			padding-right: 10rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			line-height: 1.6;
			color: #333;

			&::-webkit-scrollbar {
				width: 4rpx;
			}

			&::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 2rpx;
			}

			&::-webkit-scrollbar-thumb {
				background: #c1c1c1;
				border-radius: 2rpx;
			}

			&::-webkit-scrollbar-thumb:hover {
				background: #a8a8a8;
			}
		}

		.button-group {
			flex-shrink: 0;
			display: flex;
			gap: 20rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
		}

		.button {
			padding: 20rpx;
			border-radius: 12rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			min-width: 200rpx;
			flex: 1;
			margin: 0 auto;
		}

		.button-confirm {
			color: #FFFFFF;
			background-color: #FF9B00;
			border: none;
		}

		.button-cancel {
			color: #4D4D56;
			border: 1rpx solid #f8f8f8;
			background-color: #fff;
		}
	}

	.protocol {
		color: #FF9B00;
		text-decoration: underline;
	}


	.login-page {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		// 头部标题
		.login-header {
			position: absolute;
			width: 100%;
			top: 10%;
			left: 55%;
			transform: translate(-50%, -50%);
			color: #fff;

			.title {
				font-size: 24px;
				margin-bottom: 10px;
			}

			.subtitle {
				font-size: 16px;
				margin-bottom: 20px;
			}
		}

		// 中间登录方式
		.login-content {
			width: calc(100% - 80rpx);
			min-height: 500rpx;
			letter-spacing: 2rpx;
			position: absolute;
			bottom: 20%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: #fff;
			padding: 40rpx;

			.other-login {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
			}

			.other-login text {
				font-size: 14px;
				color: #fff;
			}

			.login-button {
				width: 100%;
				height: 80rpx !important;
				color: #fff !important;
				border: none;
				font-weight: 700;
				font-size: 32rpx !important;
				line-height: 80rpx !important;
				border-radius: 10rpx;
				margin-bottom: 40rpx;
				letter-spacing: 5rpx;

				&.u-button {
					margin: 0 0 40rpx 0 !important;
				}
			}

			// 一键登录
			.login-content-key {
				.key-login {
					display: flex;
					font-weight: bold;
					align-items: flex-end;
					justify-content: center;
					font-size: 50rpx;
				}

				.key-tip {
					font-size: 20rpx;
					margin: 20rpx 0;
				}

				.key-num {
					margin-left: 40rpx;
				}
			}

			// 手机验证码登录
			.login-content-phone {
				.tip-text {
					font-size: 24rpx;
					color: #FEFFFF;
					margin: 20rpx 0;
					text-align: left;

					.tip-phone {
						font-size: 40rpx;
						margin-left: 40rpx;
					}
				}

				.code-box {
					::v-deep .u-code-input {
						justify-content: space-between;
					}
				}
			}

			// 账号密码登录
			.login-content-pwd {
				::v-deep .uni-easyinput__content {
					border-bottom: 1rpx solid #10C5F0;
					margin-bottom: 50rpx;
				}
			}
		}

		// 底部第三方登录
		.login-bottom {
			width: calc(100% - 80rpx);
			position: absolute;
			bottom: 0%;
			left: 50%;
			transform: translate(-50%, -20%);
			text-align: center;
			color: #fff;
			padding: 40rpx;

			.third-party-login {
				margin-bottom: 40rpx;
				font-size: 28rpx;
			}

			.icons {
				display: flex;
				justify-content: center;

				.icons-icon {
					width: 50rpx;
					height: 50rpx;
					margin: 0 30rpx;
					background-color: #fff;
					border-radius: 50%;
					padding: 10rpx;
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.agreement checkbox {
				margin-right: 10rpx;
			}

			.agreement text {
				font-size: 12px;
				color: #fff;
			}
		}
	}

	.wechat-login-btn {
		background: #07C160 !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>